<template>
  <div class="container__outer h-100" :style="{ backgroundColor: bgColor }">
    <div class="wrap-container h-100">
      <div class="h-100" :class="bindClass" :style="bindStyle">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  padding?: string;
  paddingTop?: string | number;
  paddingRight?: string | number;
  paddingBottom?: string | number;
  paddingLeft?: string | number;
  bgColor?: string;
  gapLeft?: boolean;
  gapRight?: boolean;
  height?: string;
};

const props = withDefaults(defineProps<Props>(), {
  gapLeft: true,
  gapRight: true,
  paddingTop: "var(--yd-gap)",
  paddingBottom: "var(--yd-gap)",
});

const bindStyle = computed(() => {
  const style: Props = {};
  if (props.padding) {
    style.padding = props.padding;
  } else {
    if (!!props.paddingTop)
      typeof style.paddingTop === "number"
        ? style.paddingTop + "px"
        : (style.paddingTop = props.paddingTop);
    if (!!props.paddingRight)
      typeof style.paddingRight === "number"
        ? style.paddingTop + "px"
        : (style.paddingRight = props.paddingRight);
    if (!!props.paddingBottom)
      typeof style.paddingBottom === "number"
        ? style.paddingBottom + "px"
        : (style.paddingBottom = props.paddingBottom);
    if (!!props.paddingLeft)
      typeof style.paddingLeft === "number"
        ? style.paddingLeft + "px"
        : (style.paddingLeft = props.paddingLeft);
  }

  if (props.bgColor) style.bgColor = props.bgColor;
  if (props.height) style.height = props.height;
  return style;
});

const bindClass = computed(() => {
  let classList: string[] = [];
  if (props.gapLeft) classList.push("wrap-pl");
  if (props.gapRight) classList.push("wrap-pr");
  return classList.join(" ");
});
</script>
<style scoped lang="less"></style>
